<!--
 * @Descripttion: 阅读情况列表页
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-16 17:57:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-08 09:27:28
-->
<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon">
      <div class="part">
        <div>
          <p class="titleViewReading">{{ viewReadingTitle.title }}</p>
          <ul class="noticeList clearfix">
            <li>
              <span>发布时间：{{ viewReadingTitle.createTime }}</span>
            </li>
            <li>
              <span>来源：{{ viewReadingTitle.source }}</span>
            </li>
            <li>
              <span>发布人：{{ viewReadingTitle.author }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="part part1">
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="账号名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.userName"
                  placeholder="请输入账号名称"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="推送用户" class="row-padding-bottom">
                <el-select
                  v-model="filterField.userType"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in pushUsers"
                    :key="index"
                    :label="item.name"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="阅读状态" class="row-padding-bottom">
                  <el-select
                    v-model="readStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    @clear="showinfo"
                  >
                    <el-option
                      v-for="(item, index) in viewReadingOptions"
                      :key="index"
                      :label="item.name"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- <el-form-item>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="commonBtn"
              ></el-button>
            </el-form-item> -->
            </template>
            <el-col :lg="8" :xl="6">
              <el-form-item label="">
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 40px; color: #409eff; cursor: pointer"
                  class="btnColor"
                >
                  {{ advanced ? '收起' : '展开' }}
                  <i
                    :class="
                      advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-row class="insuranceBox">
          <ul class="noticeTable clearfix">
            <li>通知人数：{{ viewReadingPeople.totalCount }}</li>
            <li>未读人数：{{ viewReadingPeople.noReadCount }}</li>
          </ul>
        </el-row>
        <el-table
          :data="tableViewReadingList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          ref="tableBox1"
          :max-height="tableHeight"
        >
          <el-table-column
            type="index"
            width="80px"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="接收人账号名称"
            align="left"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.userName"
                :columnName="'userName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="userType"
            label="推送用户"
            align="center"
            :formatter="formatuserType"
          ></el-table-column>
          <el-table-column
            prop="userTel"
            label="手机号"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="readStatus"
            label="阅读状态"
            align="center"
            :formatter="formatreadStatus"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="paginationViewReading"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'viewReading',
  data() {
    return {
      date: [],
      isShow: false,
      loading: true,
      advanced: false,
      infoId: '',
      tableViewReadingList: [],
      viewReadingTitle: '',
      viewReadingPeople: '',
      viewReadingOptions: [
        {
          name: '已读',
          label: 1,
        },
        {
          name: '未读',
          label: 0,
        },
      ], //阅读状态
      pushUsers: [
        {
          name: '监察用户',
          label: 'MONITOR',
        },
        {
          name: '行业主管用户',
          label: 'DIRECTOR',
        },
        {
          name: '企业用户',
          label: 'COMPANY',
        },
        {
          name: '项目用户',
          label: 'PROJECT_ADMINISTRATOR',
        },
        {
          name: '银行用户',
          label: 'BANK',
        },
      ], //推送用户
      back: true,
      titleText: '阅读情况列表',
      requestUrl: 'api-i/info/expand/findreadstatuslist',
      readStatus: 0, //默认为未读状态
      //搜索条件
      filterField: {
        userName: '',
        userType: '',
        readStatus: '0',
        infoId: '',
      },
      tableHeight: null,
      hiddleToolBar: false,
    }
  },
  created() {
    this.infoId = this.$route.query.infoId
    this.filterField.infoId = this.$route.query.infoId
    if (this.infoId) {
      this.getInfobyId()
      this.getViewReadingPeople()
    }
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.$refs.paginationViewReading.getTableListData()
    })
    window.addEventListener('scroll', this.handleScroll, true)

    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 290
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 328 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 300
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 232

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 格式化阅读状态
     */
    formatreadStatus(row, column) {
      for (var i = 0; i < this.viewReadingOptions.length; i++) {
        if (this.viewReadingOptions[i].label == row.readStatus) {
          return this.viewReadingOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化推送用户
     */
    formatuserType(row, column) {
      for (var i = 0; i < this.pushUsers.length; i++) {
        if (this.pushUsers[i].label == row.userType) {
          return this.pushUsers[i].name
        }
      }
    },
    /**
     * @description: 获取阅读情况列表标题内容
     */
    getInfobyId() {
      this.axios({
        method: 'post',
        url: 'api-i/info/expand/findbyid',
        data: {
          infoId: this.infoId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.viewReadingTitle = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取阅读情况通知人数和未读人数
     */
    getViewReadingPeople() {
      this.axios({
        method: 'get',
        url: 'api-i/info/expand/allandnoreadcount',
        params: {
          infoId: this.infoId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.viewReadingPeople = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    /**
     * @description:返回政策通知页面
     */
    goBackList() {
      this.$router.push('/home/notice/inforList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/notice/inforList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description:获取阅读情况列表表格数据
     */
    getTableList(data) {
      this.tableViewReadingList = data
      this.loading = false
      if (this.tableViewReadingList.length < 1) {
        this.isShow = true
      }
    },
    // 移除tag时触发
    showinfo() {
      this.filterField.readStatus = this.readStatus
      this.$refs.paginationViewReading.getTableListData()
    },
    // 搜索
    searchList() {
      this.filterField.readStatus = this.readStatus
      this.$refs.paginationViewReading.getTableListData()
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
  .titleStyle {
    color: #333;
    font-size: 22px;
    .el-icon-caret-bottom {
      color: #71818e;
    }
  }
}

.container .mainCon {
  //   background: none;
  //   top: 197px;
  padding: 0;
  .insuranceBox {
    font-size: 14px;
    .noticeTable {
      margin-bottom: 14px;
      font-size: 14px;
      color: #3a3a3a;
      li {
        float: left;
      }
      li:nth-child(2) {
        margin-left: 60px;
      }
    }
    .tableTotal {
      height: 28px;
      font-size: 14px;
      color: #3a3a3a;
    }
  }
  .part {
    background: #ffffff;
    padding: 24px;
    // margin-bottom: 10px;
    &:first-child {
      border-bottom: 10px solid #f5f7fa;
    }
  }
  .part1 {
    padding-bottom: 0;
  }
}
.titleViewReading {
  font-size: 20px;
  color: #3a3a3a;
}
.noticeList {
  margin-top: 15px;
  font-size: 14px;
  color: #666666;
  li {
    float: left;
    margin-right: 20px;
  }
  .partDot {
    font-size: 12px;
    color: #009588;
  }
}
</style>
